<template>
    <div>
        <Card shadow>
            <div class="search-con search-con-top">
                <ButtonGroup>
                    <Button :disabled="hasAuthority('ActEdit}')?false:true"  class="search-btn" type="primary" @click="handleModal()">
                        <span>添加</span>
                    </Button>
                </ButtonGroup>
            </div>
            <Table :columns="columns" :data="data" :loading="loading">
                <template slot="action" slot-scope="{ row }">
                    <a :disabled="hasAuthority('ActEdit')?false:true"   @click="handleModal(row)">
                        编辑</a>&nbsp;
                    <Dropdown v-show="hasAuthority('ActEdit')" transfer ref="dropdown" @on-click="handleClick($event,row)">
                        <a href="javascript:void(0)">
                            <span>更多</span>
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem  name="remove">删除</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>&nbsp;
                </template>
            </Table>
            <Page :total="pageInfo.total" :current="pageInfo.page" :page-size="pageInfo.limit" show-elevator show-sizer
                  show-total
                  @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
        </Card>
        <Modal v-model="modalVisible"
               :title="modalTitle"
               width="40"
               @on-cancel="handleReset">
            <div>
                <Form ref="form" :model="formItem" :rules="formItemRules" :label-width="100">
                    <FormItem label="门店id" prop="storeId">
                        <Input v-model="formItem.storeId"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="活动名称" prop="name">
                        <Input v-model="formItem.name"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="活动类型：1限时活动，2体验活动" prop="actType">
                        <Input v-model="formItem.actType"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="主图" prop="mainPic">
                        <Input v-model="formItem.mainPic"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="上架时间" prop="shelfTime">
                        <Input v-model="formItem.shelfTime"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="开售时间" prop="startTime">
                        <Input v-model="formItem.startTime"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="结束时间" prop="endTime">
                        <Input v-model="formItem.endTime"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="有效开始时间" prop="codeStime">
                        <Input v-model="formItem.codeStime"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="有效结束时间" prop="codeEtime">
                        <Input v-model="formItem.codeEtime"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="轮播图" prop="carouselPics">
                        <Input v-model="formItem.carouselPics"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="详情图" prop="detailPics">
                        <Input v-model="formItem.detailPics"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="分享图片" prop="sharePic">
                        <Input v-model="formItem.sharePic"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="分享标题" prop="shareTitle">
                        <Input v-model="formItem.shareTitle"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="分享描述" prop="shareRemark">
                        <Input v-model="formItem.shareRemark"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="是否可以退款：0否，1是" prop="isRefundable">
                        <Input v-model="formItem.isRefundable"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="单人可购买数量" prop="purchaseQty">
                        <Input v-model="formItem.purchaseQty"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="有效天数" prop="effectiveDay">
                        <Input v-model="formItem.effectiveDay"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="有效类型：0指定日期有效，1购买后有效天数，2长期有效" prop="effectiveType">
                        <Input v-model="formItem.effectiveType"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="使用规则" prop="des">
                        <Input v-model="formItem.des"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="启用状态：0、停用，1、启用" prop="status">
                        <Input v-model="formItem.status"  placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="删除状态：0、未删除，1、已删除" prop="deleted">
                        <Input v-model="formItem.deleted"  placeholder="请输入内容"></Input>
                    </FormItem>
                </Form>
                <div class="drawer-footer">
                    <Button type="default" @click="handleReset">取消</Button>&nbsp;
                    <Button type="primary" @click="handleSubmit" :loading="saving">保存</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    import Act from '@/api/Act'

    export default {
        name: 'Act',
        data () {
            return {
                loading: false,
                saving: false,
                modalVisible: false,
                modalTitle: '',
                pageInfo: {
                    total: 0,
                    page: 1,
                    limit: 10
                },
                formItemRules: {
                    storeId: [
                        {required: true, message: '门店id不能为空', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '活动名称不能为空', trigger: 'blur'}
                    ],
                    actType: [
                        {required: true, message: '活动类型：1限时活动，2体验活动不能为空', trigger: 'blur'}
                    ],
                    mainPic: [
                        {required: true, message: '主图不能为空', trigger: 'blur'}
                    ],
                    shelfTime: [
                        {required: true, message: '上架时间不能为空', trigger: 'blur'}
                    ],
                    startTime: [
                        {required: true, message: '开售时间不能为空', trigger: 'blur'}
                    ],
                    endTime: [
                        {required: true, message: '结束时间不能为空', trigger: 'blur'}
                    ],
                    codeStime: [
                        {required: true, message: '有效开始时间不能为空', trigger: 'blur'}
                    ],
                    codeEtime: [
                        {required: true, message: '有效结束时间不能为空', trigger: 'blur'}
                    ],
                    carouselPics: [
                        {required: true, message: '轮播图不能为空', trigger: 'blur'}
                    ],
                    detailPics: [
                        {required: true, message: '详情图不能为空', trigger: 'blur'}
                    ],
                    sharePic: [
                        {required: true, message: '分享图片不能为空', trigger: 'blur'}
                    ],
                    shareTitle: [
                        {required: true, message: '分享标题不能为空', trigger: 'blur'}
                    ],
                    shareRemark: [
                        {required: true, message: '分享描述不能为空', trigger: 'blur'}
                    ],
                    isRefundable: [
                        {required: true, message: '是否可以退款：0否，1是不能为空', trigger: 'blur'}
                    ],
                    purchaseQty: [
                        {required: true, message: '单人可购买数量不能为空', trigger: 'blur'}
                    ],
                    effectiveDay: [
                        {required: true, message: '有效天数不能为空', trigger: 'blur'}
                    ],
                    effectiveType: [
                        {required: true, message: '有效类型：0指定日期有效，1购买后有效天数，2长期有效不能为空', trigger: 'blur'}
                    ],
                    des: [
                        {required: true, message: '使用规则不能为空', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, message: '启用状态：0、停用，1、启用不能为空', trigger: 'blur'}
                    ],
                    deleted: [
                        {required: true, message: '删除状态：0、未删除，1、已删除不能为空', trigger: 'blur'}
                    ],
                },
                formItem: {
                    actId: '',
                    storeId: '',
                    name: '',
                    actType: '',
                    mainPic: '',
                    shelfTime: '',
                    startTime: '',
                    endTime: '',
                    codeStime: '',
                    codeEtime: '',
                    carouselPics: '',
                    detailPics: '',
                    sharePic: '',
                    shareTitle: '',
                    shareRemark: '',
                    isRefundable: '',
                    purchaseQty: '',
                    effectiveDay: '',
                    effectiveType: '',
                    des: '',
                    status: '',
                    deleted: '',
                },
                columns: [
                    {
                        title: '门店id',
                        key: 'storeId',
                        width: 100
                    },
                    {
                        title: '活动名称',
                        key: 'name',
                        width: 100
                    },
                    {
                        title: '活动类型：1限时活动，2体验活动',
                        key: 'actType',
                        width: 100
                    },
                    {
                        title: '主图',
                        key: 'mainPic',
                        width: 100
                    },
                    {
                        title: '上架时间',
                        key: 'shelfTime',
                        width: 100
                    },
                    {
                        title: '开售时间',
                        key: 'startTime',
                        width: 100
                    },
                    {
                        title: '结束时间',
                        key: 'endTime',
                        width: 100
                    },
                    {
                        title: '有效开始时间',
                        key: 'codeStime',
                        width: 100
                    },
                    {
                        title: '有效结束时间',
                        key: 'codeEtime',
                        width: 100
                    },
                    {
                        title: '轮播图',
                        key: 'carouselPics',
                        width: 100
                    },
                    {
                        title: '详情图',
                        key: 'detailPics',
                        width: 100
                    },
                    {
                        title: '分享图片',
                        key: 'sharePic',
                        width: 100
                    },
                    {
                        title: '分享标题',
                        key: 'shareTitle',
                        width: 100
                    },
                    {
                        title: '分享描述',
                        key: 'shareRemark',
                        width: 100
                    },
                    {
                        title: '是否可以退款：0否，1是',
                        key: 'isRefundable',
                        width: 100
                    },
                    {
                        title: '单人可购买数量',
                        key: 'purchaseQty',
                        width: 100
                    },
                    {
                        title: '有效天数',
                        key: 'effectiveDay',
                        width: 100
                    },
                    {
                        title: '有效类型：0指定日期有效，1购买后有效天数，2长期有效',
                        key: 'effectiveType',
                        width: 100
                    },
                    {
                        title: '使用规则',
                        key: 'des',
                        width: 100
                    },
                    {
                        title: '启用状态：0、停用，1、启用',
                        key: 'status',
                        width: 100
                    },
                    {
                        title: '删除状态：0、未删除，1、已删除',
                        key: 'deleted',
                        width: 100
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        fixed: 'right',
                        width: 120
                    }
                ],
                data: []
            }
        },
        methods: {
            handleModal (data) {
                if (data) {
                    this.modalTitle = '编辑活动表
'
                    this.formItem = Object.assign({}, this.formItem, data)
                } else {
                    this.modalTitle = '添加活动表
'
                }
                this.modalVisible = true
            },
            handleReset () {
                const newData = {
                    actId: '',
                    storeId: '',
                    name: '',
                    actType: '',
                    mainPic: '',
                    shelfTime: '',
                    startTime: '',
                    endTime: '',
                    codeStime: '',
                    codeEtime: '',
                    carouselPics: '',
                    detailPics: '',
                    sharePic: '',
                    shareTitle: '',
                    shareRemark: '',
                    isRefundable: '',
                    purchaseQty: '',
                    effectiveDay: '',
                    effectiveType: '',
                    des: '',
                    status: '',
                    deleted: '',
                }
                this.formItem = newData
                //重置验证
                let form  = this.refs['form']
                form.resetFields()
                        this.modalVisible = false
                this.saving = false
            },
            handleSubmit () {
                let form  = this.refs['form']
                form.validate((valid) => {
                    if (valid) {
                        this.saving = true
                        if (this.formItem.actId) {
                        Act.update(this.formItem).then(res => {
                            if (res.code === 0) {
                                this.$Message.success('保存成功')
                                this.handleReset()
                             }
                            this.handleSearch()
                        }).finally(() => {this.saving = false})
                    } else {
                       Act.add(this.formItem).then(res => {
                            this.handleReset()
                            this.handleSearch()
                            if (res.code === 0) {
                                this.$Message.success('保存成功')
                            }
                          }).finally(() => {this.saving = false})
                        }
                   }
                })
            },
            handleSearch (page) {
                if (page) {
                    this.pageInfo.page = page
                }
                this.loading = true
                Act.list({page: this.pageInfo.page, limit: this.pageInfo.limit}).then(res => {
                    this.data = res.data.records
                    this.pageInfo.total = parseInt(res.data.total)
                }).finally(() => {this.loading = false})
            },
            handlePage (current) {
                this.pageInfo.page = current
                this.handleSearch()
            },
            handlePageSize (size) {
                this.pageInfo.limit = size
                this.handleSearch()
            },
            handleRemove (data) {
               let modal = this.$Modal
               modal.confirm({
                    title: '确定删除吗？',
                    onOk: () => {
                        Act.remove(data.actId).then(res => {
                            if (res.code === 0) {
                                this.pageInfo.page = 1;
                                this.$Message.success('删除成功');
                            }
                            this.handleSearch();
                        })
                    }
                })
            },
            handleClick (name, row) {
                switch (name) {
                    case 'remove':
                        this.handleRemove(row)
                        break
                }
            }
        },
        mounted: function () {
            this.handleSearch()
        }
    }
</script>
